<template>
	<view class="plan-image-card" :style="'background-image:url('+bg[index]+')'">
		<text style="font-size: 40rpx;font-weight: 600;margin-bottom: 10rpx;">{{data.planName}}</text>
		<text>{{data.planKind=='0'?'个人计划':'共同计划'}}</text>
		<view class="btn">
			<view class="show-btn" @click="clickMore">
				<text>查看</text>
			</view>
		</view>
		<view class="right">
			<u-icon name="more-dot-fill" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name:"plan-image-card",
		data() {
			return {
				bg:[
					'http://mp4.q05.cc/%E8%83%8C%E6%99%AF1.png',
					'http://mp4.q05.cc/%E8%83%8C%E6%99%AF3.png',
					'http://mp4.q05.cc/%E8%83%8C%E6%99%AF4.png',
					'http://mp4.q05.cc/%E8%83%8C%E6%99%AF5.png',
					'http://mp4.q05.cc/%E8%83%8C%E6%99%AF2.png',
				]
			};
		},
		props:['index','data'],
		methods:{
			clickMore(){
				this.$u.vuex('planViewData',this.data);
				uni.navigateTo({
					url:'/pages/plan/plan'
				})
			}
		}
	}
</script>

<style lang="scss">
	.plan-image-card{
		width: 634rpx;
		height: 188rpx;
		border-radius: 30rpx;
		background-image: url(../../static/backgroud/bg-1.png) ;
		background-repeat: no-repeat;   //不重复
		background-size: 100% 100%;     // 满屏
		padding: 30rpx;
		margin-bottom: 30rpx;
		color: #fff;
		text{
			display: block;
		}
		position: relative;
	}
	.show-btn{
		width:120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding:5rpx 0;
		border: 1px solid #fff;
		border-radius: 60rpx;
		position: absolute;
		right: 50rpx;
		bottom: 30rpx;
	}
	.right{
		position: absolute;
		top:15rpx;
		right:30rpx;
		transform: rotate(90deg);
	}
</style>
